<template>
	<view class="body">
		<u-navbar title="添加银行卡" :title-bold="true" title-color="#000" :border-bottom="false" custom-class="home-bg" :background="{ background: 'transparent' }"></u-navbar>

		<view class="add-top">
			<view class="card-top flex align-center">输入卡名称卡号添加</view>
			<view class="card-center flex align-center">
				<text style="margin-right: 20rpx">卡名称</text>
				<u-input v-model="bankCard.bankName" />
			</view>
			<view class="card-center flex align-center">
				<text style="margin-right: 50rpx">姓名</text>
				<u-input v-model="bankCard.name" />
			</view>
			<view class="card-center flex align-center">
				<text style="margin-right: 50rpx">卡号</text>
				<u-input v-model="bankCard.cardNumber" />
			</view>
		</view>

		<view class="bottom-btn flex align-center flex-center">
			<button @click="addMyBankCard">保存</button>
		</view>
	</view>
</template>

<script>
import user from '@/api/user';

export default {
	data() {
		return {
			bankCard: {
				bankName: null, //卡名称
				cardNumber: null, //卡号
				cardOwnerName: null, //持卡人姓名
				name: null
			},
			user: {}
		};
	},
	onLoad() {
		this.bankCard.cardOwnerName = uni.getStorageSync('user').fullName;
		this.user = uni.getStorageSync('user');
	},
	methods: {
		addMyBankCard() {
			if (!this.user.fullName && !this.user.idCardNumber) {
				uni.showToast({
					title: '个人信息不完整，请前往完善个人信息',
					icon: 'none',
					duration: 2500 // 适当延长显示时间
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/bundle/pages/user_set/user_set'
					});
				}, 2500);
				return;
			}
			if (!this.bankCard.bankName) {
				uni.showToast({
					title: '卡名称不能为空',
					icon: 'none',
					duration: 1500 // 适当延长显示时间
				});
				return;
			}
			if (!this.bankCard.name) {
				uni.showToast({
					title: '银行卡持有者姓名不能为空',
					icon: 'none',
					duration: 1500 // 适当延长显示时间
				});
				return;
			}

			if (this.bankCard.cardNumber) {
				if (!/^([1-9]{1})(\d{15}|\d{16}|\d{18})$/.test(this.bankCard.cardNumber)) {
					uni.showToast({
						title: '银行卡卡号输入不规则，请检查',
						icon: 'none',
						duration: 1500 // 适当延长显示时间
					});
					return;
				}
			} else {
				uni.showToast({
					title: '卡号不能为为空',
					icon: 'none',
					duration: 1500 // 适当延长显示时间
				});
				return;
			}

			user.addMyBankCard(this.bankCard).then((res) => {
				uni.showToast({
					title: '卡号添加成功',
					icon: 'success',
					duration: 1500 // 适当延长显示时间
				});

				// 延迟跳转让用户看到提示
				setTimeout(() => {
					uni.navigateBack({
						url: '/pages/user/card/card'
					});
				}, 1000);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.body {
	background: #f5f5f5;
}
.flex {
	display: flex;
}
.align-center {
	align-items: center;
}
.flex-center {
	justify-content: center;
}
.flex-between {
	justify-content: space-between;
}
.flex-column {
	flex-direction: column;
}
.bottom-btn {
	margin-top: 200rpx;
	button {
		width: 300rpx;
		height: 68rpx;
		line-height: 68rpx;
		color: #fff;
		background-color: #f05a39;
		border-radius: 50rpx;
	}
}
.add-top {
	margin: 30rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;

	font-size: 30rpx;
	color: #333333;
	.card-top {
		height: 100rpx;
		font-weight: 550;
		font-size: 30rpx;
		color: #333333;
	}
	.card-center {
		height: 100rpx;
		border-top: 2rpx solid #eeeeee;
	}
}
</style>
